<template>
  <div class="my-login">
    <div>
      <van-divider
        :style="{
          color: '#1989fa',
          fontSize: '20px',
          fontWeight: 'bold',
          borderColor: '#1989fa',
          padding: '15px 16px',
        }"
        >欢迎进入西湖掌上游</van-divider
      >
    </div>
    <div>
      <van-image
        round
        width="6rem"
        height="6rem"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />

      <van-form @submit="onSubmit" error-message-align="right">
        <van-field
          v-model="uname"
          name="uname"
          label="用户名"
          left-icon="user-o"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="upwd"
          type="password"
          name="upwd"
          label="密码"
          left-icon="bag-o"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 18px">
          <van-button round block type="info" native-type="submit"
            >登&nbsp;&nbsp;录</van-button
          >
        </div>
      </van-form>
    </div>
    <div>
      <router-link to="/register">没有账号？立即注册</router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "login",
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
  methods: {
    onSubmit() {
      const { uname, upwd } = this;
      const url = "http://127.0.0.1:5050/users/login";
      const params = `uname=${uname}&upwd=${upwd}`;
      this.axios.post(url, params).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$router.push("/");
          this.$store.commit("updateUname", uname);
          this.$store.commit("updateUser_name", res.data.payload.user_name);
        } else {
          Toast("登录失败,用户名或密码错误");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-login {
  background-image: url("/public/img/user/login-bg.png");
  background-size: cover;
  position: fixed;
  width: 100%;
  height: 100%;
  > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    width: 94vw;
    transform: translateX(-47vw);
    position: absolute;
    top: 30vw;
    left: 50vw;
    .van-image {
      margin: 0 auto;
      margin-bottom: 40px;
    }
    .van-form {
      background-color: rgba(63, 31, 52, 0.1);
      padding: 40px 20px;
    }
  }
  > div:nth-child(3) {
    position: absolute;
    bottom: 10vw;
    left: 32vw;
    a {
      color: #333;
    }
  }
}
</style>
